/**
 * 分页
 * 每页显示多少
*/
var prepage = 2;
var page = 1;
var pages = 0;
var comments = [];
// 每次页面初始化时调取评论
$.ajax({
    type: 'get',
    url: '/api/comment',
    data: {
        contentId: $("#contentId").val()
    },
    dataTYpe: 'json',
    success: function(result) {
        if (result.code == 0) {
            comments = result.data.reverse()
            renderComment()
        } else {
            alert(result.messgae)
        }
    }
})

// 提交评价
$('#messageBtn').on('click', function() {
    $.ajax({
        type: 'post',
        url: '/api/comment/post',
        data: {
            contentId: $("#contentId").val(),
            content: $("#messageBox").val()
        },
        dataTYpe: 'json',
        success: function(result) {
            if (result.code == 0) {
                $("#messageBox").val('')
                comments = result.data.comments.reverse()
                renderComment()
            } else {
                alert(result.messgae)
            }
        }
    })
})

/**
 * 点击分页
*/
$('.pager').on('click', 'a', function(e) {
    if ($(this).parent().hasClass('previous')) {
        page--;
    } else {
        page++;
    }
    renderComment()
})

/**
 * 渲染评论区
*/
function renderComment() {
    $(".commentsCount").html(comments.length)
    // 分页
    var $lis = $(".pager li");
    var pages = Math.ceil(comments.length / prepage);
    var start = Math.max((0, page - 1)*prepage),end = Math.min(start + prepage, comments.length);
    $lis.eq(1).html(page+'/'+pages)
    if (page <= 1) {
        page = 1;
        $lis.eq(0).html('<span>没有上一页了</span>')
    } else {
        $lis.eq(0).html('<a href="javascript:;">上一页</a>')
    }
    if (page >= pages) {
        page = pages;
        $lis.eq(2).html('<span>没有下一页了</span>')
    } else {
        $lis.eq(2).html('<a href="javascript:;">下一页</a>')
    }

    var html = '';
    for (var i = start;i < end;i++) {
        html += '<li class="list-group-item ">'+
        '    <h4 class="list-group-item-heading row">'+
        '        <span class="col-md-8">'+comments[i].username+'</span>'+
        '        <span class="text-right col-md-4">'+
        '            <i class="badge">'+formatDate(comments[i].postTime)+'</i>'+
        '        </span>'+
        '    </h4>'+
        '    <p class="list-group-item-text">'+comments[i].content+'</p>'+
        '</li>';
    }
    $(".messageList").html(html)
}

/**
 * 格式化时间
*/
function formatDate(d) {
    var date1 = new Date(d);
    return date1.getFullYear() +'-'+ (date1.getMonth()+1) + '-' + date1.getDate() + ' '+ date1.getHours() +':'+date1.getMinutes() + ':' + date1.getSeconds()
}